<template>
	<div style="width: 50%;display: inline-block;vertical-align: top;" class="pl10 pr10 mb12">
		<div class="displayFlex mb18 pl10">
			<div style="font-size: 15px;color: #5A5A5A;">土壤</div>
			<div v-if="listHeaderMock.mock7" style="color: #888;" class="font12 ml10">以下数据为演示数据</div>
		</div>
		
		<div style="width: 100%;height: 396px;background: #FFFFFF;border-radius: 20px;padding: 30px 0;position: relative;">
			<img src="@/assets/sIcon160.png" style="width: 100%;height:330px" />
	
			<el-tooltip class="item" effect="dark" content="100" placement="top">
				<img src="@/assets/sIcon161.png"
					style="width: 30px;height: 30px;position: absolute;bottom: 30%;right: 39%;" class="point" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="120" placement="top">
				<img src="@/assets/sIcon161.png"
					style="width: 30px;height: 30px;position: absolute;top: 16%;right: 26%;" class="point" />
			</el-tooltip>
			<el-tooltip class="item" effect="dark" content="300" placement="top">
				<img src="@/assets/sIcon161.png"
					style="width: 30px;height: 30px;position: absolute;bottom: 30%;right: 52%;" class="point" />
			</el-tooltip>
		</div>
	</div>
</template>

<script>
	let that
	import HomeMock from "@/assets/mock/HomeMock.json"

	export default {
		data() {
			return {
				data5: {},
				loading: true,
				listHeaderMock: {
					mock7: false,
				}
			}
		},
		mounted: function() {
			that = this
			that.getHpSoilReport()
		},

		methods: {
			getHpSoilReport() {
				that.ajax({
					url: 'homepage/getHpSoilReport',
					contentType: 'application/json',
					data: JSON.stringify({}),
					success: function(result) {
						that.listHeaderMock.mock7 = false
						if (result.status == -6) {
							that.listHeaderMock.mock7 = true
							result.data = HomeMock.soilReport
						}
			
						that.data5 = result.data
					},
				})
			},
		}
	}
</script>

<style scoped>

</style>